<template>
    <div class="error-page">
        <el-card>
            <div class="error_code">
                <span class="span1">403-禁止访问：访问被拒绝。</span><br /><br />
                <span class="span2">很抱歉！您不能访问该界面!</span>
            </div>
            <div class="error-handle">
                <router-link to="/">
                    <el-button class="mybutton1" size="large">返回首页</el-button>
                </router-link>
                <el-button class="error-btn mybutton1" size="large" @click="goBack">返回上一页</el-button>
            </div>
        </el-card>
    </div>
</template>

<script>
export default {
    methods: {
        goBack() {
            this.$router.go(-1);
        }
    }
};
</script>


<style scoped>
.mybutton1 {
    border: 0;
    color: #fff;
    border-radius: 15px;
    background-color: rgb(108, 174, 194);
}
.mybutton1:hover {
    border: 0;
    color: #fff;
    border-radius: 15px;
    background-color: rgb(3, 58, 161);
}
.error-page {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background-image: url('../../assets/img/403.jpg');
    background-size: cover !important;
    background-repeat: no-repeat;
    overflow: hidden;
}
.span2{
    width: 100%;
    text-align: center;
}

.error-handle {
    margin-top: 100px;
    padding-bottom: 50px;
}
.el-button {
    font-size: 16px;
}
.error-btn {
    margin-left: 100px;
}
.error_code {
    width: 100%;
    font-size: 20px;
    text-align: left;
}
.error_code .span1 {
    font-size: 30px;
    color: red;
}
.error_code .span2 {
    font-size: 18px;
}
</style>
